<template>
    <div>
        <div>
            <table-data
                    :ref="tableToolName"
                    :form="formId"
                    :table-data="list"
                    :total="total"
                    :extend-tools="extendHeaders"
                    :show-create="showCreate"
                    :show-edit="showEdit"
                    @on-page-change="handlePageChange"
                    @on-page-size-change="handlePageSizeChange"
                    @on-form-create-click="handlerFormCreate"
                    @on-form-update-click="handlerFormUpdate"
                    @on-delete="handlerItemDelete"
                    @on-filter-event="handleFilterEvent"
                    @before-form-open="handlerItemBeforeFormOpen"
                    :is-show-filter-form="isShowFilterForm"
                    :filter-form-rule="filterFormRule"
            >
            </table-data>
        </div>
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex';
    import TableData from '../../table/components/TableData';
    import formconfig from '../../config/form';
    import pageconfig from '../../table/configs/pageconfig';

    import apiService from '../../api/miniProgramOperateRecord';
    import userApiService from '../../api/admin-user';

    let formId        = formconfig.MINI_PROGRAM_OPERATION_RECORD_FORM_ID;
    let pageRequestFn = apiService.miniProgramOperateRecordPage;
    
    export default {
        name      : 'miniProgramOperationRecordPage',
        components: {
            TableData
        },
        computed  : {
            ...mapState({}),
        },
        props: {
            apId: {
                type: Number,
                default: null,
            },
            mptId: {
                type: Number,
                default: null,
            },
        },
        watch     : {
            page(newVal, oldVal) {
                this._setTablePage(newVal);
            },
        },
        methods   : {
            handlePageSizeChange(pageSize) {
                this.page     = 1;
                this.per_page = pageSize;
                this.refreshData();
            },
            handleFilterEvent(conditions) {
                this.conditions = conditions;
                this.page       = 1;
                this.refreshData();
            },
            handlePageChange(page) {
                this.page = page;
                this.refreshData();
            },
            refreshData() {//刷新页面
                this.extConditions = [];
                this.apId !== null && this.extConditions.push({field_name: "ap_id", field_type: "text", type: 1, value: this.apId});
                this.mptId !== null && this.extConditions.push({field_name: "mpt_id", field_type: "text", type: 1, value: this.mptId});
                
                this.pageRequestHandler(
                    pageRequestFn({
                        page_info : {
                            page    : this.page,
                            per_page: this.per_page
                        },
                        conditions: this.conditions.concat(this.extConditions),
                    }),
                    (data) => {
                        //获取列表数据
                        this.list  = data.list;
                        this.total = data.total_count;
                        this._clearSelectNum();
                    }
                );
            },
            handlerFormCreate(data, close) {//新建表单提交，close为关闭表单弹窗函数
            
            },
            handlerFormUpdate(data, id, close) {//更新表单提交,close为关闭表单弹窗函数
            
            },
            handlerItemDelete(data) {//删除条目
            },
            _clearSelectNum() {//清空表格选中条目
                this.$refs[this.tableToolName] && (this.$refs[this.tableToolName].selectNum = 0);
            },
            _setTablePage(page) {//设置表格分页
                this.$refs[this.tableToolName] && (this.$refs[this.tableToolName].page = page);
            },
            handlerItemBeforeFormOpen(data, setCustomProps) {//表单打开前的操作，setCustomProps为设置表单中字段额外信息
                //e.g 设置表单字段的额外属性,如图片上传接口，添加token头部信息
                //fixme xinya-table中有个bug,如果设置了头部，则在修改表单中，关于时间的字段都显示为空
                false && data && setCustomProps([
                    {
                        field_name : 'pic_url',//指定字段
                        field_props: {
                            data   : {},//请求附带参数,上传照片附带骑手id
                            headers: {//验证头部
                                Authorization   : '',//this.token
                                Accept          : 'application/vnd.app.v1+json',
                                ContentType     : 'application/json'
                            },
                        }
                    },
                ]);
            },
        },
        data() {
            return {
                formId       : formId,
                extendHeaders: [
                ],
                showCreate   : false,
                showEdit     : false,
                page         : 1,
                per_page     : pageconfig.DEFAULT_PAGE_SIZE,
                conditions   : [],
                extConditions: [],
                list         : [],
                total        : 0,
                tableToolName: 'tableTool',

                //过滤表单配置
                isShowFilterForm: true,//是否显示过滤表单
                filterFormRule  : [//过滤表单设置
                    {
                        fieldName  : 'user_name',
                        fieldType  : 'select',
                        multiple   : true,

                        filterable      : true,//必须为true
                        remote          : true,//必须为true
                        optionsRemoteUrl: userApiService.getUsersOptionUrl(),//获取远程的ajax url地址必须填写

                        //可选配置
                        optionsRemoteUrlMethod     : 'post',//请求方法 get、post,默认为 'get'
                        optionsRemoteQueryParamName: 'query',//请求中搜索字段名称,不设置默认为 'query'
                        optionsRemoteUrlData       : {//请求额外可带post参数,默认为空

                        },
                        optionsRemoteFieldNameValue: 'value',//默认为 'value'
                        optionsRemoteFieldNameLabel: 'label',//默认为 'label'
                    },
                    {
                        fieldName  : 'ap_id',//必要配置，过滤字段
                        fieldType  : 'text',//必要配置，表单字段类型
                    },
                    // {
                    //     fieldName  : 'open_appid',//必要配置，过滤字段
                    //     fieldType  : 'text',//必要配置，表单字段类型
                    // },
                    {
                        fieldName  : 'wx_authorizer_appid',//必要配置，过滤字段
                        fieldType  : 'text',//必要配置，表单字段类型
                    },
                    {
                        fieldName  : 'op_name',//必要配置，过滤字段
                        fieldType  : 'text',//必要配置，表单字段类型
                    },
                    {
                        fieldName  : 'wx_auditid',//必要配置，过滤字段
                        fieldType  : 'text',//必要配置，表单字段类型
                    },
                    {
                        fieldName  : 'op_result',//必要配置，过滤字段
                        fieldType  : 'select',//必要配置，表单字段类型
                    },
                    {
                        fieldName  : 'result',//必要配置，过滤字段
                        fieldType  : 'text',//必要配置，表单字段类型
                    },
                    {
                        label      : '创建时间',//可选配置，如果未设置，将会从表格定义的字段中根据fieldName获取
                        fieldName  : 'created_at',//必要配置，过滤字段
                        fieldType  : 'datetimerange',//必要配置，表单字段类型
                        placeholder: '',//可选配置
                        
                        dateFormat: 'yyyy-MM-dd HH:mm:ss',//可选配置，日期格式，默认yyyy-MM-dd HH:mm:ss
                    },
                ],
            }
        },
        created() {
            this.refreshData();
        }
    }
</script>